<template>
  <div>
    <button @click="count--">-1</button>
    <button @click="count -= 5">-5</button>
    <span> {{ count }}</span>
    <button @click="count++">+1</button>
    <button @click="count += 5">+5</button>

    <hr />
    <h1>{{ student.age }}</h1>
    <button @click="student.age++">长大</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
      student: {
        name: "张三",
        age: 18,
      },
    };
  },

  // 作用: 💥💥监听数据的变化, 每次数据变化, 函数会自动执行
  watch: {
    // 简写： 只能监听基本数据类型
    count(newVal) {
      // console.log("newVal  ----->  ", newVal);
      // console.log("oldVal  ----->  ", oldVal);
      document.title = newVal;
    },

    // ❌
    // student(newValue, oldValue) {
    //   console.log("newValue  ----->  ", newValue);
    //   console.log("newValue  ----->  ", oldValue);
    // },

    // 完整写法： 开启deep，监听对象和数组
    student: {
      immediate: true,
      deep: true,
      // 💥 对象和数组，是引用类型， 引用地址没变，
      handler(newValue, oldValue) {
        console.log("newValue  ----->  ", newValue);
        console.log("newValue  ----->  ", oldValue);
      },
    },
  },
};
</script>

<style></style>
